<template>
  <div class="home_activity">
    <div class="home_activity_btn">
      <div class="home_activity_left">
        <div
          v-for="item in activityList"
          :key="item.id"
          v-click-move
          @click="handleClick(item)"
        >
          <div class="home_activity_b btn">
            <NuxtImg :src="item.img" />
          </div>
        </div>
      </div>
    </div>
  </div>
  <Cp />
</template>

<script setup lang="ts">
import Cp from "~/components/Activity/Cp/index.vue";

const activityList = reactive([
  {
    id: 1,
    img: "/images/home/activity/gif-1.png",
    routeName: "ranking-treasure-chest",
  },
  {
    id: 2,
    img: "/images/home/activity/gif-2.png",
    routeName: "ranking-ranking",
  },
  {
    id: 3,
    img: "/images/home/activity/gif-3.png",
    routeName: "activity-slot",
  },
]);

const userStore = useUserStore();
function handleClick(item: any) {
  if (!userStore.isLogin) {
    userStore.changeShowLogin(true);
    return;
  }
  navigateTo({ name: item.routeName });
}
</script>

<style scoped lang="scss">
.home_activity {
  padding: 0 0.25rem;
  margin-top: 0.25rem;
}
.home_activity_left {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 0.3rem;
  gap: 0.25rem;
  height: 1.8rem;
}
.home_activity_left .home_activity_b {
  width: 3rem;
  height: 1.8rem;
}
.btn {
  cursor: pointer;
}
.home_activity_left .home_activity_b img {
  width: 100%;
  height: 100%;
}
</style>
